<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        v-slot='{ form }'
        :selectPer="'inventory:page'"
        @search='search'
        :showSearchButton='true'
      >
        <el-input
          clearable
          style='width: 150px'
          v-model='form.vin'
          placeholder='VIN码'
        ></el-input>
        <el-select
          clearable
          style='width: 150px'
          v-model='form.report'
          placeholder='是否厂家上报'
        >
          <el-option
            v-for="item in getDict(['厂家上报'])['厂家上报']"
            :key='item.index'
            :value='item.value'
            :label='item.text'
          />
        </el-select>
        <el-select
          clearable
          style='width: 150px'
          v-model='form.status'
          placeholder='库存状态'
        >
          <el-option
            v-for="item in getDict(['库存状态'])['库存状态']"
            :key='item.index'
            :value='item.value'
            :label='item.text'
          />
        </el-select>
        <CarModel
          style='width: 400px'
          v-model='modelList'
          ref='carModel'
          placeholder='车型组件'
        />
        <el-date-picker
          v-model='form.inTime'
          type='datetimerange'
          start-placeholder='入库日期'
          end-placeholder='入库日期'
          clearable
          value-format='yyyy-MM-dd HH:mm:ss'
          :default-time="['00:00:00', '23:59:59']"
        />
        <el-date-picker
          v-model='form.outTime'
          type='datetimerange'
          start-placeholder='出库日期'
          end-placeholder='出库日期'
          clearable
          value-format='yyyy-MM-dd HH:mm:ss'
          :default-time="['00:00:00', '23:59:59']"
        />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value='tableData'
        :total-count='totalCount'
        :has-action='true'
        :table-column-attributes='tableColumnAttributes'
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :width='200'
        @row-dblclick='handleDetails'
      >
        <template #action='{ row }'>
          <i
            v-if="row.status==='已入库' "
            class='el-icon-refresh-left'
            title='移库申请'
            style='margin-left: 15px; cursor: pointer'
            v-permission="'inventory:move'"
            @click='handleGoto(row)'
          ></i>
          <i
            class='el-icon-edit'
            title='修改车辆返利信息'
            style='margin-left: 15px; cursor: pointer'
            v-permission="'inventory:updateRebate'"
            @click='handleRebate(row)'
          ></i>
          <i
            v-if="row.report==='否' && row.status==='已入库' "
            class='el-icon-film'
            title='厂家上报'
            style='margin-left: 15px; cursor: pointer'
            v-permission="'inventory:report'"
            @click='handleReport(row)'
          ></i>
          <!-- <i
            v-if="row.status==='已入库'"
            class='el-icon-truck'
            title='前装车'
            style='margin-left: 15px; cursor: pointer'
            @click='handleCar(row)'
          ></i> -->
          <i
            v-if="row.status==='已入库' "
            class='el-icon-right'
            title='退货出库'
            style='margin-left: 15px; cursor: pointer'
            v-permission="'purchaseWh:saleReturn'"
            @click='returnPurchase(row)'
          ></i>
        </template>
      </data-table>
      <el-dialog
        title='修改车辆返利信息'
        :visible.sync='visible'
        width='60%'
        :before-close='handleClose'>
        <el-form :model='edtruleForm' ref='edtruleForm' label-width='110px'>
          <el-row>
            <el-col :span='12'>
              <el-form-item label='批售返利' prop='ps'>
                <el-input clearable v-model='edtruleForm.ps' placeholder='请输入'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='置换返利' prop='zh'>
                <el-input clearable v-model='edtruleForm.zh' placeholder='请输入'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='零售返利' prop='ls'>
                <el-input clearable v-model='edtruleForm.ls' placeholder='请输入'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='大客户返利' prop='dkh'>
                <el-input clearable v-model='edtruleForm.dkh' placeholder='请输入'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='其他返利' prop='qt'>
                <el-input clearable v-model='edtruleForm.qt' placeholder='请输入'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='建店返利' prop='jd'>
                <el-input clearable v-model='edtruleForm.jd' placeholder='请输入'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row>
          <el-col style='text-align: right'>
            <el-button type='primary' @click="handleEdit('edtruleForm')">修改</el-button>
          </el-col>
        </el-row>
      </el-dialog>
      <el-dialog
        title='厂家上报'
        :visible.sync='visibleDialog'
        width='60%'
        :before-close='handleClose'>
        <el-form :model='ruleForm' ref='ruleForm' label-width='110px'>
          <el-row>
            <el-col :span='12'>
              <el-form-item label='车架号' prop='vin'>
                <el-input clearable disabled v-model='ruleForm.vin' placeholder='请输入'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='是否计算销量' prop='calculateSales'>
                <el-select
                  clearable
                  class='w-100'
                  v-model='ruleForm.calculateSales'
                  placeholder='请选择'
                >
                  <el-option
                    v-for="item in getDict(['是否计算销量'])['是否计算销量']"
                    :key='item.index'
                    :value='item.value'
                    :label='item.text'
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='零售日期' prop='salesTime'>
                <el-date-picker
                  v-model='ruleForm.salesTime'
                  type='date'
                  class='w-100'
                  placeholder='零售日期'
                  clearable
                  value-format='yyyy-MM-dd hh:mm:ss'
                />
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='发票日期' prop='invoiceTime'>
                <el-date-picker
                  v-model='ruleForm.invoiceTime'
                  type='date'
                  class='w-100'
                  placeholder='发票日期'
                  clearable
                  value-format='yyyy-MM-dd hh:mm:ss'
                />
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='上报公司' prop='company'>
                <el-input clearable v-model='ruleForm.company' placeholder='请输入'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='24'>
              <el-form-item label='备注' prop='remark'>
                <el-input clearable v-model='ruleForm.remark'
                          type='textarea'
                          :autosize='{ minRows: 2, maxRows: 4}'
                          placeholder='请输入'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row>
          <el-col :span='4' :offset='11'>
            <el-button type='primary' @click="handleEditReport('ruleForm')">上报</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import { CarModel } from '@/components/index'
import {
  getList,
  findAll,
  postReport,
  saleReturn,
  setWarningDay,
  updateRebate
} from '@/api/pre-sale/storageManagement'
import { getDict } from '@/utils/index'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['entryStore'])
  },
  components: {
    CarModel
  },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: getList,
      dataName: ['content', 'totalRecords'],
      format(res) {
        return res.map((data) => {
          data.modelNameList = data.brandName + '/' + data.seriesName + '/' + data.modelName
           data.colors = data.outColor + '/' + data.inColor 
          data.payState = data.payState === 1 ? '已支付' : '未支付'
          data.report = data.report ? '是' : '否'
          data.lock = data.lock ? '是' : '否'
          data.warningDay = data.kcDayNum + '/' + data.warningDayNum
          return data
        })
      }
    })
  ],
  data() {
    return {
      visible: false,
      visibleDialog: false,
      ruleForm: {},
      edtruleForm: {
        dkh: '',
        id: '',
        jd: '',
        ls: '',
        ps: '',
        qt: '',
        zh: ''
      },
      modelList: [],
      getDict: getDict,
      form: {
        brandId: '',
        seriesId: '',
        modelId: ''
      },
      params: {
        id: '',
        rebateId: ''
      },
      tableColumnAttributes: [
        {
          name: '门店',
          value: 'storeName',
          type: 'text'
        },
        {
          name: '仓库',
          value: 'storageName',
          type: 'text',
          width: '100px'
        },
        {
          name: '仓位',
          value: 'storageSiteName',
          type: 'text',
          width: '100px'
        },
        {
          name: '库存编号',
          value: 'stockCode',
          type: 'text',
          width: '160px'
        },
        {
          name: '供应商',
          value: 'supplierName',
          type: 'text',
          width: '100px'
        },
        {
          name: '车架号',
          value: 'vin',
          type: 'text',
          width: '160px'
        },
        {
          name: '品牌/车系/车型',
          value: 'modelNameList',
          type: 'text',
          width: '300px'
        },
        {
          name: '车身色/内饰色',
          value: 'colors',
          type: 'text',
          width: '150px'
        },
        {
          name: '当前存放天数/库存预警存放天数',
          value: 'warningDay',
          type: 'text'
        },
        {
          name: '采购时间',
          value: 'purchaseTime',
          type: 'text',
          width: '100px'
        },
        {
          name: '入库时间',
          value: 'inBoundTime',
          type: 'text',
          width: '100px'
        },
        {
          name: '出库时间',
          value: 'outBoundTime',
          type: 'text',
          width: '100px'
        },
        {
          name: '财务检核日期',
          value: 'financialCheck',
          type: 'text'
        },
        {
          name: '是否锁车',
          value: 'lock',
          type: 'text'
        }, {
          name: '是否填报返利',
          value: 'rebateName',
          type: 'text'
        }, {
          name: '库存状态',
          value: 'status',
          type: 'text'
        }, {
          name: '是否前装车',
          value: 'saleManUser',
          type: 'text'
        }, {
          name: '是否厂家上报',
          value: 'report',
          type: 'text'
        }
      ],
      dict: {}
    }
  },
  mounted() {
    this.findAll()
  },
  methods: {
    // 改变预警天数
    handleDetails({ id, warningDayNum }) {
      this.$prompt('库存预警天数：', '编辑预警信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showInput: true,
        inputValue: warningDayNum,
        inputPlaceholder: '请输入'
      }).then(async({ value }) => {
        await setWarningDay(id, value).then(res => {
          const { success } = res
          if (success) {
            this.setTableData()
          }
        })
      }).catch(() => {

      })
    },
    async handleEdit() {
      await updateRebate(this.edtruleForm).then(res => {
        const { success } = res
        if (success) {
          this.setTableData()
          this.visible = false
        }
      })
    },
    handleClose() {
      this.visible = false
      this.visibleDialog = false
    },
    // 移库申请
    handleGoto(row) {
      this.$router.push({ name: 'addMoveStorageApply', query: { id: row.id } })
    },
    // 返利
    handleRebate(row) {
      this.visible = true
      this.edtruleForm = {
        ...this.edtruleForm,
        id: row.id
      }
    },
    // 厂家上报
    handleReport(row) {
      this.visibleDialog = true
      this.ruleForm.inventoryId = row.id
      this.ruleForm.vin=row.vin;
    },
    // 编辑厂家上报
    async handleEditReport() {
      await postReport({
        ...this.ruleForm
      }).then(res => {
        const { success } = res
        if (success) {
          this.visibleDialog = false
          this.setTableData()
        }
      })
    },
    // 获取返利信息
    async findAll() {
      await findAll({
        storeId: this.entryStore
      }).then(res => {
        const { success, data } = res
        if (success) {
          console.log(data)
        }
      })
    },
    //
    returnPurchase({ id }) {
      this.$prompt('退货出库原因：', '退货出库', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showInput: true,
        inputType: 'textarea',
        inputPlaceholder: '请输入退货出库原因'
        //  inputPattern: /W+/,
        //  inputErrorMessage: '请输入退货问题描述'
      }).then(async({ value }) => {
        await saleReturn({ id, remark: value })
        this.setTableData()
        this.$message.success('操作成功')
      }).catch(() => {

      })
    },
    // 移库申请
    handleCar(row) {

    },
    // 查询
    search(form) {
      if (this.modelList.length > 0) {
        form.brandId = this.modelList[0]
        form.seriesId = this.modelList[1]
        form.modelId = this.modelList[3]
      } else {
        form.brandId = ''
        form.seriesId = ''
        form.modelId = ''
      }
      if (form.inTime && form.inTime.length > 0) {
        form.inBoundMinTime = form.inTime[0]
        form.inBoundMaxTime = form.inTime[1]
      } else {
        form.inBoundMinTime = ''
        form.inBoundMaxTime = ''
      }
      if (form.outTime && form.outTime.length > 0) {
        form.outBoundMinTime = form.outTime[0]
        form.outBoundMaxTime = form.outTime[1]
      } else {
        form.outBoundMinTime = ''
        form.outBoundMaxTime = ''
      }
      delete form.inTime
      delete form.outTime
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    add() {

    }
  }
}
</script>
<style lang='scss'>
.table-simple-checkbox { // 隐藏 1
  .el-checkbox__label {
    display: none;
  }
}
</style>
